<template>
  <div class="container">
    <Card style="margin: 20px">
      <Form :model="form" :rules="ruleValidate" :label-width="100">
        <Row type="flex" justify="space-between">
          <Col>
            <FormItem label="关键字" prop="keyword">
              <Input v-model="form.keyword" placeholder="根据编号搜索" style="width: 300px" />
            </FormItem>
          </Col>
          <Col>
            <FormItem>
              <Button style="margin-right: 10px" @click="eliminate">清除</Button>
              <Button type="primary" @click="search">搜索</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <el-tag type="info" style="width: 100%; margin-bottom: 10px">
        <i class="el-icon-info"></i>
        总条数: {{ total }}
      </el-tag>
      <Table :columns="columns1" :data="data1">
        <template slot-scope="{ row }" slot="operation">
          <!-- 删除 -->
          <Button icon="ios-trash-outline" @click="del(row)" type="error" ghost shape="circle"></Button>
        </template>
        <!-- 试题编号 -->
        <template slot-scope="{ row }" slot="questionIDs">
          <a
            class="questionIDs"
            href="javascript:;"
            @click="btn(item)"
            v-for="item in row.questionIDs"
            :key="item.number"
          >{{ item.number }}</a>
        </template>
        <!-- 题型 -->
        <template
          slot-scope="{ row }"
          slot="questionType"
        >{{ row.questionType | questionType(row.questionType) }}</template>
      </Table>
      <Page :total="total" @on-change="change" />
      <Modal v-model="modal1" title="题目预览">
        <Row>
          <Col :span="6">【题型】:{{ formVideo.questionType | questionType(formVideo.questionType) }}</Col>
          <Col :span="6">【编号】:{{ formVideo.id }}</Col>
          <Col :span="6">【难度】:{{ formVideo.difficulty | difficulty(formVideo.difficulty) }}</Col>
          <Col :span="6">【标签】:{{ formVideo.tags }}</Col>
        </Row>
        <Row style="margin-top: 10px">
          <Col :span="6">【学科】:{{ formVideo.subjectName }}</Col>
          <Col :span="6">【目录】:{{ formVideo.directoryName }}</Col>
          <Col :span="6">【方向】:{{ formVideo.direction }}</Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col>【题干】:{{ formVideo.question }}</Col>
        </Row>
        <Row>
          <Col style="margin-left: 60px">
            <p>选项:(以下选项为正确答案):</p>
            <p v-for="item in formVideo.options" :key="item.id">
              <input
                type="checkbox"
                name="daan"
                id
                checked="checked"
                v-if="item.isRight === 1"
                disabled="disabled"
                style="cursor: not-allowed"
              />
              <input
                type="checkbox"
                name="daan"
                id
                v-else
                style="cursor: not-allowed"
                disabled="disabled"
              />
              {{ item.code }}:{{ item.title }}
            </p>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col>
            【参考答案】:
            <Button @click="vide">视频答案预览</Button>
          </Col>
          <Col v-if="isVideo">
            <video :src="formVideo.videoURL" controls="controls"></video>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col>【答案解析】:{{ formVideo.answer }}</Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col>【题目备注】:{{ formVideo.remarks }}</Col>
        </Row>
      </Modal>
    </Card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
export default {
  filters: {
    // 题型
    questionType (val) {
      if (val === '1') {
        return '单选'
      } else if (val === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 难度
    difficulty (val) {
      if (val === '1') {
        return '简单'
      } else if (val === '2') {
        return '一般'
      } else {
        return '难度'
      }
    }
  },
  data () {
    return {
      modal1: false,
      isVideo: false,
      form: {
        keyword: null,
        page: 1,
        pagesize: 10
      },
      ruleValidate: {
        keyword: []
      },
      //! 表头
      columns1: [
        {
          title: '编号',
          key: 'id',
          align: 'center'
        },
        {
          title: '题型',
          key: 'questionType',
          align: 'center',
          slot: 'questionType'
        },
        {
          title: '题目编号',
          key: 'questionIDs',
          align: 'center',
          slot: 'questionIDs'
        },
        {
          title: '录入时间',
          key: 'addTime',
          align: 'center'
        },
        {
          title: '答题时间()',
          key: 'totalSeconds',
          align: 'center'
        },
        {
          title: '正确率(s)',
          key: 'accuracyRate',
          align: 'center'
        },
        {
          title: '录入人',
          key: 'userName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          slot: 'operation'
        }
      ],
      //! 表格数据
      data1: [],
      // page: {},
      page: 1, // 当前页数
      pagesize: 10, // 每页数量
      total: 0, // 总数量
      //! 视频列表
      formVideo: {
        questionType: '', // 试题类型
        id: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        answer: '', // 答案解析
        remarks: '', // 题目备注
        videoURL: '' // 视频
      },
      answer: ''
    }
  },
  created () {
    this.getRandoms()
  },
  methods: {
    //! 搜索筛选
    async search () {
      const res = await randoms({ keyword: this.form.keyword })
      // console.log(res)
      this.total = res.data.counts
      this.data1 = res.data.items
    },
    //! 清除搜索框
    eliminate () {
      this.form.keyword = ''
      this.getRandoms()
    },
    //! 题目详情
    async btn (row) {
      this.modal1 = true
      console.log(row)
      const data = { id: row.id }
      const res = await detail(data)
      console.log(res)
      this.formVideo = res.data
    },
    //! 视频弹窗
    async vide () {
      console.log('视频')
      this.isVideo = true
    },
    //! 获取组题列表
    async getRandoms () {
      const res = await randoms({ page: this.page, pagesize: this.pagesize })
      console.log(res)
      this.total = res.data.counts
      this.data1 = res.data.items
    },
    //! 页码发生改变时的回调函数
    async change (val) {
      this.page = val
      const res = await randoms({ page: this.page, pagesize: this.pagesize })
      this.total = res.data.counts
      this.data1 = res.data.items
    },
    //! 删除
    async del (row) {
      // await removeRandoms(row)
      // this.$Message.success({
      //   content: '删除成功'
      // })
      // this.getRandoms()
      try {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // console.log(obj.id) // 当前id
            removeRandoms(row).then(() => {
              // 重新渲染页面
              this.getRandoms()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped >
.questionIDs {
  display: block;
  margin-bottom: 10px;
}
.Row {
  margin-bottom: 10px;
}
video {
  width: 100%;
  height: 100%;
}
</style>
